
<script setup lang="ts">
/**
 * 本文件包括登录逻辑与页面
 * auther: lulj3
 */
import '../../styles/index.scss'
import { useRouter } from 'vue-router'
import { ElLoading } from 'element-plus'

import { showGreeting } from '@/views/login/test'
showGreeting() // 测试调用外部js文件内的方法

const router = useRouter()

const login = function(){
  console.log("登录按钮被触发")

  // 加载动画
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  setTimeout(() => {
    loading.close()
  }, 1000)
  setTimeout(() => {
    router.push("/visualization")
  }, 1100)
}
</script>

<template>
<div class="contain">
  <!-- 左侧容器 -->
  <div class="left">
    <!-- 校徽 -->
    <div class="img">
      <img src="../../pictures/sdu.png" title="山东大学校徽">
    </div>
    <!-- 校名 -->
    <div class="characters">
      <div class="sdu-name">
        <div class="one">SHAN  DONG</div>
        <div class="two">UNIVERSITY</div>
      </div>
    </div>
  </div>

  <!-- 右侧容器 -->
  <div class="right">
    <!-- 登录表单 -->
    <div class="login-box">
      <!-- 标题 -->
      <div class="platform-name">
        <h1>隧道施工地质灾害诊断平台</h1>
      </div>
      <!-- 欢迎 -->
      <div class="welcome">
        <span>WELCOME LOGIN</span>
      </div>
      <!-- 输入框 -->
      <div class="input-box">
        <div class="input-one"><input type="text"/></div>
        <div class="input-two"><input type="password"/></div>
      </div>
      <!-- 复选框 -->
      <div class="checkbox">
        <input type="checkbox" />我已阅读并同意平台《用户协议》和隐私协议
      </div>
      <!-- 登录按钮 -->
      <div class="login-button">
        <button @click="login">登 录</button>
      </div>
      <!-- 忘记密码 -->
      <div class="forget-a">
        <a href="#">忘记密码</a>
        <a href="#">前往注册</a>
      </div>
      <!-- 更多登录分割线 -->
      <div class="more-line">
        <div class="line"></div>
        <div class="more">更多登录</div>
        <div class="line"></div>
      </div>
      <!-- 更过登录图标 -->
      <div class="more-login-icon">
        <img src="../../pictures/weixin.png">
        <img class="qq-icon" src="../../pictures/QQ.png">
        <img src="../../pictures/weibo.png">
      </div>
    </div>
  </div>
</div>
</template>
